<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>存取元素样式</title>
  <style>
    #app{
      width: 300px;
      height: 300px;
      background-color: aqua;
    }
  </style>
</head>
<body>
  <div class="app" style="width:300px;height:300px;background-color: aqua;font-size: 32px;">
    我是 style 属性
  </div>
  <div id="app" style="border:1px solid red; background-color:blueviolet;">
    我是计算属性
  </div>
</body>
<script>
  /** 1.HTML 中的样式有 3 种定义方式：
   *      a.外部样式表（通过<link>元素）、
   *      b.文档样式表（使用<style>元素）
   *      c.元素特定样式（使用 style 属性）。
   *    DOM2 Style 为这 3 种应用样式的机制都提供了 API。
   * **/
  /** 2.元素样式
   *    a.任何支持 style 属性的 HTML 元素在 JavaScript 中都会有一个对应的 style 属性。这个 style 属性是 CSSStyleDeclaration 类型的实例，其中包含通
   *      过 HTML 的 style 属性为元素设置的所有样式信息，但不包含通过层叠机制从文档样式和外部样式中继承来的样式。
   *    b.大多数style对象的属性名直接与 html的 syle 属性值名相同，可以直接使用，少数采用连字符的style属性名可以采用驼峰命名方式获取。但有一个 CSS 属性名不
   *      能直接转换，它就是 float。因为float 是 JavaScript 的保留字，所以不能用作属性名。DOM2 Style 规定它在 style 对象中对应的属性应该是 cssFloat。
   *    c.在标准模式下，所有尺寸都必须包含单位。在混杂模式下，可以把 style.width设置为"20"，相当于"20px"。如果是在标准模式下，把 style.width 设置为"20"
   *      会被忽略，因为没有单位。实践中，最好一直加上单位。
   *    d.通过 style 属性设置的值也可以通过 style 对象获取。如果 HTML 元素上没有 style 属性，则 style 对象包含所有可能的 CSS 属性的空值。
   * **/

  /** 3.DOM 样式属性（style属性）和方法
   *    a.DOM2 Style 规范也在 style 对象上定义了一些属性和方法。这些属性和方法提供了元素 style 属性的信息并支持修改，列举如下
   *      + cssText，包含 style 属性中的 CSS 代码（字符串）。
   *      + length，应用给元素的 CSS 属性数量。
   *      + parentRule，表示 CSS 信息的 CSSRule 对象（下一节会讨论 CSSRule 类型）(没有什么用处)。
   *      + getPropertyCSSValue(propertyName)，返回包含 CSS 属性 propertyName 值的 CSSValue对象（已废弃）。
   *      + getPropertyPriority(propertyName)，如果 CSS 属性 propertyName 使用了!important则返回"important"，否则返回空字符串。
   *      + getPropertyValue(propertyName)，返回属性 propertyName 的字符串值。
   *      + item(index)，返回索引为 index 的 CSS 属性名。
   *      + removeProperty(propertyName)，从样式中删除 CSS 属性 propertyName。
   *      + setProperty(propertyName, value, priority)，设置 CSS 属性 propertyName 的值为 value，priority 是"important"或空字符串。
   *    b.通过 cssText 属性可以存取样式的 CSS 代码。在读模式下，cssText 返回 style 属性 CSS 代码在浏览器内部的表示。在写模式下，给 cssText 赋值会重写整
   *      个 style 属性的值，意味着之前通过 style 属性设置的属性都会丢失。设置 cssText 是一次性修改元素多个样式最快捷的方式，因为所有变化会同时生效。
   *    c.length 属性是跟 item()方法一起配套迭代 CSS 属性用的。此时，style 对象实际上变成了一个集合，也可以用 style[i] 代替 item(i)取得相应位置的 CSS 
   *      属性名，使用中括号或者 item()都可以取得相应位置的 CSS 属性名（"background-color"，不是"backgroundColor"）。这个属性名可以传给 
   *      getPropertyValue()以取得属性的值。
   *    d.getPropertyValue()方法返回 CSS 属性值的字符串表示。如果需要更多信息，则可以通过getPropertyCSSValue()获取 CSSValue 对象。这个对象有两个属
   *      性：cssText 和 cssValueType。前者的值与 getPropertyValue()方法返回的值一样；后者是一个数值常量，表示当前值的类型（0代表继承的值，1 代表原始
   *      值，2 代表列表，3 代表自定义值）。
   *    e.removeProperty()方法用于从元素样式中删除指定的 CSS 属性。使用这个方法删除属性意味着会应用该属性的默认（从其他样式表层叠继承的）样式。
   * **/
  function checkStyleAttribute(){
    let dom = document.querySelector('.app');
    //1.获取 style 的属性值 
    console.log(dom.style.cssText);
    //2.设置 style 的属性值
    dom.style.cssText = 'width: 300px; height: 300px;background-color:red';
    //3.采用获取 style[i] 和 item(i) 属性名以及 getPropertyValue获取属性值
    for(let i = 0; i < dom.style.length;i++){
      console.log(`dom.style[${i}]`,dom.style[i],dom.style.getPropertyValue(dom.style[i]));
      console.log(`dom.style.item(${i})`,dom.style.item(i),dom.style.getPropertyValue(dom.style.item(i)));
    }
    //4.getPropertyCSSValue()获取 CSSValue 对象 getPropertyCSSValue 已经被废弃，log显示为undefined
    // console.log(dom.style.getPropertyCSSValue);//undefined
    // for(let i = 0; i< dom.style.length ;i++){
    //   let valueObj = dom.style.getPropertyCSSValue(dom.style[i]);
    //   console.log('cssText--',valueObj.cssText,',cssValueType--',valueObj.cssValueType);
    // }
    //5.采用 removeProperty 删除 style中的样式
    dom.style.removeProperty('background-color');
  }
  //checkStyleAttribute();
  //  width: 300px; height: 300px; background-color: aqua; font-size: 32px;
  //  dom.style[0] width 300px
  //  dom.style.item(0) width 300px
  //  dom.style[1] height 300px
  //  dom.style.item(1) height 300px
  //  dom.style[2] background-color red
  //  dom.style.item(2) background-color red


  /** 4.计算样式
   *    a.style 对象中包含支持 style 属性的元素为这个属性设置的样式信息，但不包含从其他样式表层叠继承的同样影响该元素的样式信息。DOM2 Style在
   *      document.defaultView上增加了getComputedStyle()方法。这个方法接收两个参数：要取得计算样式的元素和伪元素字符串（如":after"）。
   *      如果不需要查询伪元素，则第二个参数可以传 null。getComputedStyle()方法返回一个 CSSStyleDeclaration 对象（与 style 属性的类型一样），
   *      包含元素的计算样式。
   *    b.浏览器虽然会返回样式值，但返回值的格式不一定相同。
   *    c.关于计算样式要记住一点，在所有浏览器中计算样式都是只读的，不能修改 getComputedStyle() 方法返回的对象。而且，计算样式还包含浏览器内部样式表中的信
   *      息。因此有默认值的 CSS 属性会出现在计算样式里。但是不同浏览器的默认值可能不一定相同。
   * **/
   function checkGetComputedStyle(){
     let dom = document.querySelector('#app');
     //1.获取 dom 的样式计算属性
     let object = document.defaultView.getComputedStyle(dom);
     console.log(object.style);
     console.log(object.backgroundColor);
     console.log(object.width);
     console.log(object.height);
     console.log(object.border);
     console.log(object);
   }
   checkGetComputedStyle();
  // undefined
  // rgb(138, 43, 226)
  // 300px
  // 300px
  // 1px solid rgb(255, 0, 0)
  // CSSStyleDeclaration {}
</script>
</html>
